<!--
 * @Author: your name
 * @Date: 2021-01-11 17:20:39
 * @LastEditTime: 2021-01-13 11:42:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\lenses\index\color.vue
-->
<template>
    <div class="lens_content_item mb100">
    <div class="lens_content_item_blue mb50">
        <h3 class="text_c size18 b mb50">{{$t("Blue light blocking")}}</h3>
        <ul class="flex blue_light">
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_1.png')" alt="" class="mb30">
                <h3 class="size14 b text_c">{{$t("Clear")}}</h3>
            </li>
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_2.png')" alt="" class="mb30">
                <h3 class="size14 b text_c">{{$t("Amber")}}</h3>
            </li>
        </ul>
    </div>
    <div class="lens_content_item_blue mb50">
        <h3 class="text_c size18 b mb50">{{$t("Photochromic")}}</h3>
        <ul class="flex photochromic">
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_3.png')" alt="" class="mb20">
                <h3 class="size14 b text_c">{{$t("Gray")}}</h3>
            </li>
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_4.png')" alt="" class="mb20">
                <h3 class="size14 b text_c">{{$t("Brown")}}</h3>
            </li>
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_5.png')" alt="" class="mb20">
                <h3 class="size14 b text_c">{{$t("Blue")}}</h3>
            </li>
            <li class="li mb30">
                <img :src="require('@/assets/image/lenses/blue_light_blocking_6.png')" alt="" class="mb20">
                <h3 class="size14 b text_c">{{$t("Green")}}</h3>
            </li>
        </ul>
    </div>
    <div class="lens_content_item_blue mb50">
        <h3 class="text_c size18 b mb50">{{$t("Polarized")}}</h3>
        <div class="Polarized text_c">
            <img :src="require('@/assets/image/lenses/blue_light_blocking_7.png')" alt="">
        </div>
    </div>
    <div class="lens_content_item_blue mb50">
        <h3 class="text_c size18 b mb50">{{$t("Sunglasses tint")}}</h3>
        <ul class="flex Sunglasses_tint">
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_8.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t("Gray")}}</h3>
            </li>
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_8.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t("Brown")}}</h3>
            </li>
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_9.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t("Green")}}</h3>
            </li>
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_10.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t("Blue")}}</h3>
            </li>
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_11.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t("Purple")}}</h3>
            </li>
            <li>
                <img class="mb20" :src="require('@/assets/image/lenses/blue_light_blocking_11.png')" alt="">
                <h3 class="size14 b ptb10 text_c">{{$t('Mirrored')}}</h3>
            </li>
        </ul>
    </div>
    </div>
</template>

<script>
export default {
    name: 'color'
}
</script>